<template>
    <div class="mr-mathouseBoxinfo">
      <div>
        <el-button type="primary" @click="openDialog()" size="mini" plain>一键确认</el-button>
        <span style="margin-left:3px">已扫码：<span><b>{{countBlue}}</b></span></span>
        <span style="margin-left:3px">总数：<span><b>{{totalBlue}}</b></span></span>
      </div>
      <div>
        <ul>
          <li v-for="(value,index) in boxTmInfo" :key=index>
            <p>待入库物料信息</p>
            <p>物料确认状态：<span style="margin-left:3px" ref="materialStatus">{{isMaterial}}</span></p>
            <p>条码：<span style="margin-left:3px"><b>{{value.barcode}}</b></span></p>
            <p v-if="value.ckBarCode!= null">标准件条码：<span style="margin-left:3px"><b>{{value.ckBarCode}}</b></span></p>
            <p>合格证号：<span style="margin-left:3px"><b>{{value.mesCheckQualiticationId}}</b></span></p>
            <p>AO号<span style="margin-left:3px"><b>{{value.aoCode}}</b></span></p>
            <p>限用架次<span style="margin-left:3px"><b>{{value.xLimitLotNo}}</b></span></p>
            <p>最长保管期<span style="margin-left:3px"><b>{{value.maxStorageDate}}</b></span></p>
            <p>移交数量：<span style="margin-left:3px">{{value.deliveryQty}}</span>
              &nbsp;&nbsp;&nbsp;物料数量：
              <span style="fontSize:20px;">
                <el-input
                  id="test"
                  @blur="blurNum(value.storageQty,index)"
                  ref=saomaInput
                  size="mini"
                  v-model= value.storageQty
                  placeholder="请输入物料数量"
                  @keyup.enter.native="handleTopInput"
                ></el-input>
              </span>
            </p>
            <p>图号：<span style="margin-left:3px">{{value.itemCode}}</span></p>
            <p>质量编号/件号：<span style="margin-left:3px">{{value.qualityCode}}</span></p>
            <p>成品型号：<span style="margin-left:3px">{{value.mProductNumber}}</span></p>
            <p v-if="bigM">大件库位：<span style="margin-left:3px">
                <el-select size="mini" v-model=value.wmsLocatorId placeholder="请选择" ref=bigMselect @change="blurNums(value.wmsLocatorId,index)">
                  <el-option
                      v-for="item in BigMlist"
                      :key="item.wmsLocatorId"
                      :label="item.locatorNo"
                      :value="item.wmsLocatorId"
                  >
                  </el-option>
                </el-select>  
            </span></p>
          </li>
        </ul>
      </div>
      <div class="message">
        <el-dialog title="确认信息填写" :visible.sync="dialogVisible" width="55%" :before-close="handleClose">
          <ul>
            <li style="list-style: none;"><el-input placeholder="请输入密码" v-model="passwordValue" show-password></el-input></li>
          </ul>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false;passwordValue='';">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false; oneClickConfirm();passwordValue='';">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
</template>
<script>
import { searchWorkbinXl } from'@/utils/api.js'
import request from "@/utils/request.js";
export default {
    name:"MrMathouseBoxinfo",
    data(){
      return{
        // 缓存箱扫码返回的箱子物料信息 
        boxTmInfo:[],
        mNumber:'',
        num:'',
        maxNum:'',
        materialNumber:'',
        isMaterial:'未确认',
        toInput:true,
        materialList:[],
        BigMlist:[],
        bigM:false,
        bigMkuwei:'',
        countBlue:0,
        totalBlue:0,
        passwordValue:"",
        dialogVisible:false,
      }
    },
    methods:{
      handleClose(){
        this.passwordValue = "";
      },
      blurNum(nums,index){
        console.log(nums,index)
        for(let i=0;i<this.boxTmInfo.length;i++){
          console.log(this.mNumber,"数量")
          if(index == i){
            this.mNumber = i
            this.num = nums
            this.maxNum = this.boxTmInfo[i].deliveryQty
            // this.boxTmInfo[i].storageQty = num
            
          }
        }
      },
      blurNums(value,index){
        this.$nextTick(()=>{
          // console.log(this.boxTmInfo)
          // for(let iv=0;iv<this.boxTmInfo.length;iv++){
          //   // console.log(this.mNumber,333)
          //   if(index == iv){
          //     this.boxTmInfo[i].storageQty = num
          //   }
          // }
          this.$bus.$emit('mwBoxList',this.boxTmInfo)
        })
        
      },
      // 输入值后回车 聚焦topinput
      handleTopInput(){
        // 将修改的数据返给首页
        // console.log(this.boxTmInfo)
        this.$bus.$emit('mwBoxList',this.boxTmInfo)

      },
      openDialog(){
        this.dialogVisible = true;
      },
      oneClickConfirm(){//一键确认
        //弹出界面确认按钮 调后端接口
        request.post("/materialReceipt/confirmPassWord",{"passWord":this.passwordValue}).then((res)=>{
            console.log(res);
            if (res.data.retCode === "200") {
              var r=window.confirm("确认物料是否有漏掉, 是否继续!");
              if (r==true){
                  console.log("箱子信息111",this.boxTmInfo);
                  this.materialList = [];
                  //
                  for(var i=0;i<this.boxTmInfo.length;i++){
                    this.$refs.materialStatus[i].style.color = 'blue'
                    this.$refs.materialStatus[i].innerHTML = '已确认'
                    this.countBlue = this.boxTmInfo.length
                    this.totalBlue = this.boxTmInfo.length
                    // 将已经确认的物料信息传给物料入库按钮
                    var barcode = this.boxTmInfo[i].barcode;
                    this.materialList.push(barcode)
                  }
                  this.$bus.$emit('mwBoxList',this.boxTmInfo);
                  this.$bus.$emit('mwCheckMaterialBarcode',this.materialList);
                  this.$bus.$emit("oneClickConfirm",{});
                //  this.$bus.$emit("checkMaterialList")
              }
            }else{
              this.$Alert({
                  title: "失败",
                  message: res.data.retMsg,
                  type: "error",
              });
            }
        });
        
      }
    },
    mounted(){
      // 大件下拉列表接口
      searchWorkbinXl({

      }).then((res)=>{
        console.log('大件下拉列表接口',res)
        this.BigMlist = res.data.responseBody
      })
      // 接收3开头扫hcx 判断为大件 显示下拉框
      this.$bus.$on('mwBighcxtm',(e)=>{
        this.bigM = true;
      })
      this.$bus.$on('mwHcBoxInfo',(e)=>{
        for(let i=0;i<e.length;i++){
          if(e[i]==null){
            e.splice(i,1)
          }
        }
        this.boxTmInfo = e
      })
      // 接收物料扫码信息
      this.$bus.$on('mrMwMaterialListSend',(e)=>{
        this.$nextTick(()=>{
          // this.$refs.saomaInput[e].focus()
          this.$refs.materialStatus[e.index].style.color = 'blue'
          this.$refs.materialStatus[e.index].innerHTML = '已确认'
          this.$bus.$emit('mwBoxList',this.boxTmInfo)
          // 将已经确认的物料信息传给物料入库按钮
          this.materialList.push(e.msg)
          this.$bus.$emit('mwCheckMaterialBarcode',this.materialList)
        })  
      })
      // 清空已确认物料条码或合格证集合
      this.$bus.$on('mrMwClearMaterialList',(e)=>{
        this.materialList = []
        this.boxTmInfo = []

      })
      //统计数量
      this.$bus.$on('countNum',(e)=>{
        //console.log("数量统计",e);
        this.countBlue = e;
      })
      //计算总数
      this.$bus.$on('countTotalNum',(e)=>{
        //console.log("数量统计",e);
        this.totalBlue = e;
      })
    },
    watch:{
      num(newValue,oldValue){
        console.log(newValue)
        if(newValue >= 0 && newValue <= this.maxNum){
          // 输入值符合规范 允许聚焦Topinput
          // this.toInput = true
          this.boxTmInfo[this.mNumber].storageQty = newValue
        }else {
           this.$Alert({
            title: "错误",
            message: '物料数量输入有误！',
            type: "error",
          });
          this.boxTmInfo[this.mNumber].storageQty = this.maxNum
          // 输入值有误 不允许聚焦Topinput
          // this.toInput = false
        }
      }
    }

}
</script>
<style scoped>
.mr-mathouseBoxinfo {
  display: none;
}
.mr-mathouseBoxinfo div ul {
  width: 100%;
}
.mr-mathouseBoxinfo div ul li {
  float: left;
  padding: 0 10px;
  width: 300px;
  /* height: 180px; */
  /* background-color: rgb(200, 244, 244); */
  background: #ffffff;
  /* background: blue; */
  border-radius: 4px;
  box-shadow: inset 0px 0px 20px 0px #cccbcb;
  margin-left: 20px;
  margin-top: 20px;
  padding-bottom: 10px;
  /* text-align: center; */
  border-radius: 10px;
}
.mr-mathouseBoxinfo div ul li p:nth-child(1) {
  text-align: center;
}
.mr-mathouseBoxinfo div ul li p{
  margin-top: 10px;
}
.el-input {
  width: 60px;
  font-size: 18px;
}
.mr-mathouseBoxinfo .message .el-input{
  width: 300px;
  margin-top: 10px;
}
.mr-mathouseBoxinfo .message li{
  margin-top: 0px;
}
</style>